<script>
export default {
  data() {
    return {
      activeName: 'first',
      selectedInstitution: {},
      institutions: [],
      tableData: [],
      t: [],
      current: 1,
      pageSize: 5,
      total: 0,
      zt: 1,
      dialogFormVisible: false,
      tuan: {},
      userid:null,
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
      if (this.activeName == 'first') {
        this.zt = 1
      } else {
        this.zt = 0
      }
      this.searchDoctors()
    },
    handleViewDetails(row) {

      // localStorage.setItem("teamid",row.id)
      // this.$router.push("/xqteam", )
       localStorage.setItem("zt",this.zt)
      this.$router.push({path: '/xqteam', query: {id: row.id}})
    },
    handleDissolve(index) {
      console.log(`解散退队，索引为${index}`);
    },
    xx(){
      this.userid=JSON.parse(localStorage.getItem("user")).id
    },
    searchDoctors() {
      //   搜索
      this.axios.post(`http://localhost:8302/team/findAll?current=${this.current}&pageSize=${this.pageSize}&id=${this.userid}&zt=${this.zt}&name=张三`, this.selectedInstitution).then(res => {
        if (res.data.code == 200) {
          this.tableData = res.data.data.records
          this.total = res.data.data.total
        }
      })
    },
    // findPage(){
    //   this.axios.post(`http://localhost:8302/team/findPage?current=${this.current}&pageSize=${this.pageSize}`,this.selectedInstitution).then(res=>{
    //     this.tableData=res.data.data.records
    //     this.total=res.data.data.total
    //   })
    // },
    findinstitutions() {
      this.axios.get('http://localhost:8302/team/findjigou').then(res => {
        this.institutions = res.data.data
      })
    },
    addteam() {
      this.$router.push('/addteam')
    },
    gb(row) {
      // alert("qqq")
      if (row.status==1){
        row.status=1
      }else if (row.status==0){
        row.status=0
      }
      this.axios.post(`http://localhost:8302/team/update`,row).then(res=>{
        this.searchDoctors();
         this.$message({
           type: 'success',
           message: res.data.data
         })
      })
    },
    findtuan() {
      this.axios.post(`http://localhost:8302/team/findtuan`, this.tuan).then(res => {
        this.t = res.data.data
        this.tuan = {}
      })
    },
    tui(row){
      this.$confirm('确定退出团队吗？', '提示', {
        confirmButtonText: '确定', style: 'width: 40px',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 这里是用户点击确定后执行的代码，例如发送删除请求到后端
        this.axios.get(`http://localhost:8302/team/tui?teamid=${row.id}&doctor=1`).then(res => {
          this.searchDoctors();
          this.dialogFormVisible = false
          this.$message({
            type: 'success',
            message: res.data.data
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    jiesan(row) {
      this.$confirm('确定解散队吗？', '提示', {
        confirmButtonText: '确定', style: 'width: 40px',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 这里是用户点击确定后执行的代码，例如发送删除请求到后端
        this.axios.get(`http://localhost:8302/team/jiesan?id=${row.id}`).then(res => {
          this.searchDoctors();
          this.dialogFormVisible = false
          this.$message({
            type: 'success',
            message: res.data.data
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    sqrt(row) {
      this.$confirm('确定申请加入' + row.teamname + '吗？', '提示', {
        confirmButtonText: '确定', style: 'width: 40px',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 这里是用户点击确定后执行的代码，例如发送删除请求到后端
        this.axios.get(`http://localhost:8302/team/sqrt?teamid=${row.id}&sqrid=1`).then(res => {
          this.searchDoctors();
          this.dialogFormVisible = false
          this.$message({
            type: 'success',
            message: res.data.data
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消申请'
        })
      })
    }
  },
  created() {
    this.xx();
    this.findtuan();
    this.findinstitutions();
    // this.findPage();
    this.searchDoctors();
  },
}
</script>

<template>
  <div style="width: 100%;margin-left: 20px;margin-right: 40px" align="center;">
    <div style="background-color: #F2F7FB;padding: 10px 0px 0px 0px">
      <el-header align="left" style="margin-top: 60px;"> | 团队管理页面</el-header>

      <el-main align="left">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>团队管理</span>
          </div>
          <div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="我管理的团队" name="first"></el-tab-pane>
              <el-tab-pane label="我加入的团队" name="second"></el-tab-pane>
            </el-tabs>

            <el-button style="width: 140px;" type="primary" @click="addteam">新增医生团</el-button>
            <el-button style="width: 140px;" @click="dialogFormVisible = true">申请加入团队</el-button>
          </div>
          <div>

            <el-dialog title="" :visible.sync="dialogFormVisible">
              <el-form :model="tuan">
                <el-form-item label="活动名称" >
                  <el-input v-model="tuan.teamname" style="width: 300px;"></el-input>
                  <el-button type="primary" style="width: 100px;" @click="findtuan">搜索</el-button>
                </el-form-item>
              </el-form>

              <el-table :data="t" style="width: 100%">
                <el-table-column prop="id" label="编号"></el-table-column>
                <el-table-column label="头像">
                  <template slot-scope="scope">
                    <img :src="scope.row.img" style="width: 40px;height: 40px;border-radius: 50%">
                  </template>
                </el-table-column>
                <el-table-column prop="teamname" label="团队名称"></el-table-column>
                <el-table-column prop="dname" label="团队长"></el-table-column>
                <el-table-column prop="label" label="团队标签"></el-table-column>
                <el-table-column prop="jigou" label="所属机构"></el-table-column>
                <el-table-column prop="num" label="签约人数"></el-table-column>
                <el-table-column prop="score" label="评分"></el-table-column>
                <el-table-column label="状态">
                  <template slot-scope="scope">
                    <span v-if="scope.row.status==1">启用中</span>
                    <span v-if="scope.row.status==0">禁用</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button type="text" @click="sqrt(scope.row)">申请入团</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-dialog>


            <el-form style="margin-top: 20px">
              <el-form-item>
                <el-select v-model="selectedInstitution.iid" placeholder="请选择">
                  <el-option label="请选择" value="null"></el-option>
                  <el-option v-for="option in institutions" :label="option.organization" :value="option.id">
                  </el-option>
                </el-select>
                <el-input v-model="selectedInstitution.teamname" placeholder="请输入关键字搜索"
                          style="width: 200px;"></el-input>
                <el-button type="primary" @click="searchDoctors" style="width:100px;margin-left: 20px">搜索</el-button>
              </el-form-item>
            </el-form>
          </div>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="编号"></el-table-column>
            <el-table-column label="头像">
              <template slot-scope="scope">
                <img :src="scope.row.img" style="width: 40px;height: 40px;border-radius: 50%">
              </template>
            </el-table-column>
            <el-table-column prop="teamname" label="团队名称"></el-table-column>
            <el-table-column prop="dname" label="团队长"></el-table-column>
            <el-table-column prop="label" label="团队标签"></el-table-column>
            <el-table-column prop="jigou" label="所属机构"></el-table-column>
            <el-table-column prop="num" label="签约人数"></el-table-column>
            <el-table-column prop="score" label="评分"></el-table-column>
            <el-table-column label="状态">
              <template slot-scope="scope">
                <!--                 @change="updateStatus(scope.row)"-->
                <el-switch
                    v-model="scope.row.status"
                    active-color="#13ce66"
                    inactive-color=""
                    :active-value="1"
                    :inactive-value="0"
                    @change="gb(scope.row)"
                ></el-switch>
                <span v-if="scope.row.status" class="switch-text">启用</span>
                <span v-else class="switch-text2">禁用</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click="handleViewDetails(scope.row)">查看详情</el-button>
                <el-button type="text" v-if="zt==1" @click="jiesan(scope.row)">解散</el-button>
                <el-button type="text" v-if="zt==0" @click="tui(scope.row)">退队</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-main>
    </div>
  </div>
</template>

<style>
.switch-text {
  position: absolute;
  left: 10px;
  top: 53%;
  transform: translateY(-50%);
  color: white;
  font-size: 9px;
}

.switch-text2 {
  position: absolute;
  left: 30px;
  top: 52%;
  transform: translateY(-50%);
  color: black;
  font-size: 9px;
}
</style>
